<template>
  <page>
    <template v-slot:header>
      <h2>
        <i class="icon iconfont">&#xe612;</i>
        <span>{{ $t("patch.sp_upgrade") }}</span>
      </h2>
    </template>
    <template v-slot:search>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="register-upload">
            <el-dialog :visible.sync="display" :before-close="handleSearch" :close-on-click-modal="false" :show-close="false">
              <importSP v-if="display" @click="handleSearch"></importSP>
            </el-dialog>
            <!-- <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :limit="1"
              :file-list="fileList"
              :on-success="handleSuccess"
              :on-error="handleError"
            > -->
            <authorization-button
              size="small"
              class="kylin-button"
              @click.native.prevent="handleUpload"
              name="spUpgrade:upload"
              >{{ $t("upload_file") }}</authorization-button
            >
            <!-- <div slot="tip" class="el-upload__tip">
                {{ $t("only_tar_and_gz") }}
              </div> -->
            <!-- </el-upload> -->
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-table
              border
              :data="tableData"
              stripe
              size="medium"
              style="width: 100%"
              :header-cell-style="{ color: 'black' }"
              :cell-style="{ color: 'black' }"
            >
              <el-table-column
                :label="$t('patch.sp_upgrade_result_desription')"
              >
                <el-table-column prop="isoUuid" label="ID"> </el-table-column>
                <el-table-column prop="isoName" :label="$t('file_name')">
                </el-table-column>
                <el-table-column prop="status" :label="$t('system.status')">
                </el-table-column>
                <el-table-column :label="$t('result')">
                  <el-popover
                    placement="bottom"
                    :title="$t('result')"
                    width="200"
                    trigger="click"
                    :content="result"
                  >
                    <div slot="reference">
                      {{ $t("patch.display_result") }}
                    </div>
                  </el-popover>
                </el-table-column>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </template>
    <template v-slot:content>
      <p class="system-table-description">
        {{ $t("patch.sp_upgrade_description") }}
      </p>
      <ky-table ref="table" :getData="getSPList" :search_data="search_data">
        <template v-slot:table>
          <el-table-column prop="isoUuid" label="ID"> </el-table-column>
          <el-table-column prop="showOsName" :label="$t('patch.os_version')">
          </el-table-column>
          <el-table-column prop="showOsArch" :label="$t('patch.CPU_arch')">
          </el-table-column>
          <el-table-column
            prop="showSpVersion"
            :label="$t('patch.patch_version')"
          >
          </el-table-column>
          <el-table-column
            prop="showSpReleaseDate"
            :label="$t('patch.publish_time')"
          >
          </el-table-column>
          <el-table-column :label="$t('patch.hostNumber')">
            <template slot-scope="scope">
              <router-link
                :to="{
                  path: $route.path + scope.row.id,
                  query: { upgradeCheckId: scope.row.upgradeCheckId },
                }"
              >
                {{ scope.row.hostNumber }}
              </router-link>
            </template>
          </el-table-column>
        </template>
      </ky-table>
    </template>
  </page>
</template>

<script>
import Page from "@/components/Page";
import kyTable from "@/components/KyTable";
import { getSPList, getLastSP } from "@/api/patch";
import importSP from "./form/importSP.vue";
import AuthorizationButton from "@/components/AuthorizationButton";
export default {
  name: "sp_upgrade",
  components: {
    Page,
    kyTable,
    importSP,
    AuthorizationButton,
  },
  activated() {
      this.$refs.table.handleSearch();
  },
  data() {
    return {
      search_data: {
        showOsName: {
          name: "patch.os_version",
          type: "select",
          items: [
            {
              key: "银河麒麟高级服务器操作系统V10",
              name: "银河麒麟高级服务器操作系统V10",
            },
            {
              key: "中标麒麟高级服务器操作系统V7",
              name: "中标麒麟高级服务器操作系统V7",
            },
          ],
        },
        showOsArch: {
          name: "system.architecture",
          type: "select",
          items: [
            { key: "aarch64", name: "aarch64" },
            { key: "x86_64", name: "x86_64" },
          ],
        },
        showSpVersion: {
          name: "patch.patch_version",
          type: "select",
          items: [
            { key: "SP1", name: "SP1" },
            { key: "SP2", name: "SP2" },
          ],
        },
      },
      display: false,
      fileList: [],
      tableData: [],
      result: "",
    };
  },
  methods: {
    getSPList,
    getLastSP,
    handleSearch() {
      this.display = false;
      this.handleGetLastSp();
      this.$refs.table.handleSearch();
    },
    handleUpload() {
      this.display = true;
    },
    handleGetLastSp() {
      this.getLastSP().then((res) => {
        this.tableData = [];
        this.tableData.push(res.data.data);
        this.result = res.data.data == null ? "" : res.data.data.result;
        this.$forceUpdate();
      });
    },
  },
  mounted() {
    this.handleGetLastSp();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.register_title {
  margin-bottom: 10px;
}
.register-upload {
  height: 120px;
}
</style>